<template>
  <div
    class="pub-search"
    :class="props.searchColumns.length > 3 ? 'line-2' : ''"
  >
    <div class="left-option">
      <slot name="leftBtn" />
    </div>
    <el-form :model="form" class="search-form" :key="keyValue">
      <!-- 筛选条件<4 一行排列 -->
      <div class="columns-content" v-if="props.searchColumns.length < 4">
        <columns
          v-bind:searchColumns="props.searchColumns"
          v-model:form="form"
        ></columns>
      </div>
      <!-- 筛选条件 = 4  上2下2 排列 -->
      <div class="line-2" v-if="props.searchColumns.length == 4">
        <div class="columns-content">
          <columns
            v-bind:searchColumns="props.searchColumns.slice(0, 2)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            v-bind:searchColumns="props.searchColumns.slice(2, 4)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 筛选条件 = 5 上2下3 -->
      <div class="line-2" v-if="props.searchColumns.length == 5">
        <div class="columns-content">
          <columns
          ref="columnsRef1"
            @changeSelect="changeSelect1"
            v-bind:searchColumns="props.searchColumns.slice(0, 2)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
          ref="columnsRef2"
            @changeSelect="changeSelect2"
            v-bind:searchColumns="props.searchColumns.slice(2, 5)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 筛选条件 = 6 上3下3 -->
      <div class="line-2" v-if="props.searchColumns.length >= 6">
        <div class="columns-content">
          <columns
            ref="columnsRef1"
            @changeSelect="changeSelect1"
            v-bind:searchColumns="props.searchColumns.slice(0, 3)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            ref="columnsRef2"
            @changeSelect="changeSelect2"
            v-bind:searchColumns="props.searchColumns.slice(3, 6)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 更多筛选条件 -->
      <transition name="task">
        <div
          class="mask-content"
          :style="{ height: maskHeight + 'px' }"
          v-show="drawerShow"
        >
          <!-- 筛选条件>6 <10 -->
          <div
            class="more-columns-content"
            v-if="props.searchColumns.length <= 10"
          >
            <div class="columns-content">
              <columns
                v-bind:searchColumns="props.searchColumns.slice(6, 9)"
                v-model:form="form"
              ></columns>
            </div>
          </div>
          <!--  -->
          <div
            class="more-columns-content"
            v-if="
              props.searchColumns.length >= 11 &&
              props.searchColumns.length <= 13
            "
          >
            <div class="columns-content">
              <columns
                v-bind:searchColumns="props.searchColumns.slice(6, 9)"
                v-model:form="form"
              ></columns>
            </div>
            <div class="columns-content">
              <columns
                v-bind:searchColumns="props.searchColumns.slice(9, 12)"
                v-model:form="form"
              ></columns>
            </div>
          </div>
        </div>
      </transition>
    </el-form>

    <div class="right-option" v-if="!props.noColumns">
      <div v-if="props.searchColumns.length > 6" class="expand-toogle-btn">
        <el-button link @click="expand">
          {{ drawerShow ? '收起' : '展开' }}
          <el-icon>
            <ArrowUp v-if="drawerShow" />
            <ArrowDown v-else />
          </el-icon>
        </el-button>
      </div>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="default" @click="resetSearchForm">重置</el-button>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, watch, toRefs, onMounted } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import _ from 'lodash'
import columns from './columns.vue'

const props = defineProps({
  searchForm: {
    type: Object,
    default() {
      return {}
    }
  },
  searchColumns: {
    type: Array,
    default() {
      return []
    }
  },
  maskAppendTo: {
    type: String,
    default: ''
  },
  noColumns: {
    type: Boolean,
    default: false
  }
})
const columnsRef1 = ref(null)
const columnsRef2 = ref(null)
const emit = defineEmits([
  'search',
  'update:searchForm',
  'update:searchColumns',
  'expand',
  'changeSelect1',
  'changeSelect2'
])

// const changeSelectEvent = ()=>{
//   console.log(columnsRef.value);
// }

// const 初始化的查询条件
const defaultSearchColumns = _.cloneDeep(props.searchColumns)
const defaultSearchFom = _.cloneDeep(props.searchForm)

// 展开更多筛选条件
const drawerShow = ref(false)
const maskHeight = ref(100)
const expand = () => {
  maskHeight.value = document.querySelector(
    `.${props.maskAppendTo}`
  ).offsetHeight
  drawerShow.value = !drawerShow.value
  emit('expand', drawerShow.value)
}

const changeSelect1 = obj => {
  emit('changeSelect1', obj)
}
const changeSelect2 = obj => {
  emit('changeSelect2', obj)
}
// 查询事件
const search = () => {
  form.value.pageSize = props.searchForm.pageSize
  form.value.pageNum = 1
  emit('update:searchForm', { ...props.searchForm, ...toRefs(form.value) })
  emit('search')
  drawerShow.value = false
}

// 重置表单事件
const keyValue = ref(new Date().getTime())
const resetSearchForm = () => {
  emit('update:searchColumns', defaultSearchColumns)
  defaultSearchColumns.map(item => {
    if (
      item.el === 'DateRange' ||
      item.el === 'AgeRange' ||
      item.el === 'YearRangeSelect'
    ) {
      form.value[item.bindBegin] = item.defaultValue[0]
      form.value[item.bindEnd] = item.defaultValue[1]
    } else if (item.el === 'moneyRangeSelect') {
      form.value[item.bindBegin] = ''
      form.value[item.bindEnd] = ''
    } else {
      form.value[item.bind] = item.defaultValue
    }
  })
  form.value.pageSize = defaultSearchFom.pageSize
  form.value.pageNum = defaultSearchFom.pageNum
  keyValue.value = new Date().getTime()

  emit('update:searchForm', { ...props.searchForm, ...toRefs(form.value) })
  emit('search', form.value)
  drawerShow.value = false
}

// {
//   label: '申请日期',
//   el: 'DateRange',
//   bindBegin: 'applyDateBegin',
//   bindEnd: 'applyDateEnd',
//   defaultValue: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
// },
// {
//   label: '年龄范围',
//   el: 'AgeRange',
//   bindBegin: 'ageBegin',
//   bindEnd: 'ageEnd',
//   defaultValue: [60, 120]
// },

const form = ref({})
// watch(
//   () => props.searchColumns,
//   val => {
//     val.map(item => {
//       if (item.el === 'DateRange' || item.el === 'AgeRange') {
//         form.value[item.bindBegin] = item.defaultValue[0]
//         form.value[item.bindEnd] = item.defaultValue[1]
//       } else {
//         form.value[item.bind] = item.defaultValue
//       }
//     })
//     // form.value.pageSize = props.searchForm.pageSize
//     // form.value.pageNum = props.searchForm.pageNum
//     emit('update:searchForm', { ...toRefs(form.value), ...defaultSearchFom })
//     console.log(form.value)
//   },
//   { immediate: true, deep: true }
// )
onMounted(() => {
  props.searchColumns.map(item => {
    if (
      item.el === 'DateRange' ||
      item.el === 'AgeRange' ||
      item.el === 'YearRangeSelect'
    ) {
      form.value[item.bindBegin] = item.defaultValue[0]
      form.value[item.bindEnd] = item.defaultValue[1]
    } else if (item.el === 'moneyRangeSelect') {
      form.value[item.bindBegin] = ''
      form.value[item.bindEnd] = ''
    } else {
      form.value[item.bind] = item.defaultValue
    }
  })
  emit('update:searchForm', { ...toRefs(form.value), ...defaultSearchFom })
})
defineExpose({ columnsRef2: columnsRef2, columnsRef1: columnsRef1 })
</script>
<style lang="scss" scoped>
.pub-search {
  display: flex;
  position: relative;
  .search-form {
    flex: 1;
    display: block;

    .el-form-item {
      margin-bottom: 10px;
    }
    :deep(.el-input) {
      width: 210px;
    }
    :deep(.el-range-editor) {
      //   width: 186px;
    }
    .age-range-select {
      width: 210px;
      display: inline-flex;
      align-items: center;
      :deep(.split) {
        font-size: 12px;
        color: #777;
        display: block;
        flex: 1;
        text-align: center;
      }
      :deep(.el-input-number) {
        width: 80px;
      }
    }
    :deep(.el-select) {
      width: 210px;
    }
    :deep(.el-cascader) {
      width: 210px;
    }
  }
  .left-option {
    display: flex;
    padding-bottom: 12px;
  }
  .right-option {
    padding-left: 10px;
    padding-bottom: 12px;
    display: flex;
  }
}
.columns-content {
  display: flex;
  justify-content: flex-end;
}
.line-2 {
  .left-option,
  .right-option {
    align-items: flex-end;
    position: relative;
  }
  .expand-toogle-btn {
    position: absolute;
    top: 2px;
    left: 5px;
  }
}

.mask-content {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: -20px;
  top: 84px;
  width: calc(100% + 40px);
  z-index: 1000000;
  .more-columns-content {
    &:first-child {
      border-top: 1px solid rgba(1, 21, 59, 0.08);
    }
    background: #fff;
    padding-top: 10px;
    padding-right: 124px;
  }
}

.task-enter-from,
.task-leave-to {
  height: 0 !important;
}
.task-enter-active,
.task-leave-active {
  transition: all 0.1s linear;
}

.container-more .more-columns-content {
  padding-right: 133px !important;
}
</style>
